<template>
  <div class="l-from-body">
    <!--<el-alert class="l-from-el-alert" title="租户名称，先添加数据连接，与数据连接名称一样" type="warning"></el-alert>-->
    <el-form :model="formData" :rules="rules" size="mini" ref="form" label-width="88px">
      <el-form-item label="上级分类" prop="f_CategoryId">
        <el-col :span="24">
          <!--
						<el-select v-model="formData.f_CategoryId" placeholder="选择上级" clearable filterable>
						  <el-option v-for="(item,index) in apiArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
						-->
          <l-tree-select v-model="formData.f_CategoryId" :options="lr_apiTree(apiArr)"> </l-tree-select>
        </el-col>
      </el-form-item>

      <el-form-item label="接口名称" prop="f_Name">
        <el-col :span="24">
          <el-input v-model="formData.f_Name"></el-input>
        </el-col>
      </el-form-item>

      <!--
			<el-form-item label="接口编码" prop="f_EnCode">
				<el-col :span="24">
					<el-input v-model="formData.f_EnCode" ></el-input>
				</el-col>
			</el-form-item>
			-->

      <el-form-item label="接口连接" prop="f_Url">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-select v-model="formData.f_RequestMethod" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="17">
            <el-input v-model="formData.f_Url"></el-input>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="请求参数">
        <div class="ui-jsonText-item">
          <el-input :height="120" type="textarea" v-model="jsonText"></el-input>
          <div class="ui-jsonText-tipText">{{ errorTipText }}</div>
        </div>
      </el-form-item>

      <el-form-item label="数据结构" prop="f_ResponseType">
        <el-col :span="12">
          <el-input
            placeholder="请选择"
            @focus="dataPickTap"
            v-model="f_ResponseType.dataTypeFullName"
            suffix-icon="el-icon-date"
          ></el-input>
        </el-col>
        <el-col style="margin-top: 8px" :span="24" v-if="f_ResponseType.dataTypeFullName">
          <label>是否集合：</label>
          <el-switch v-model="f_ResponseType.isArray" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          <el-button style="margin-left: 8px" size="mini" @click="responseTypeClear">清空</el-button>
        </el-col>
      </el-form-item>

      <el-col :span="24">
        <el-form-item label="排序" prop="f_SortCode">
          <el-input v-model="formData.f_SortCode"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="接口描述" prop="f_Description">
          <el-input type="textarea" v-model="formData.f_Description"></el-input>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>
<script>
const api = window.$api.data.datainterfacecategory;
export default {
  data() {
    return {
      apiArr: [],
      formData: {
        f_Id: "",
        f_CategoryId: "",
        f_Name: "",
        f_Url: "",
        f_EnCode: 2,
        f_RequestHeaders: "",
        f_RequestMethod: "get",
        f_RequestParameters: "",
        f_ResponseType: "",
        f_EnabledMark: 1,
        f_Description: "",
        f_SortCode: 1,
      },
      rules: {
        f_CategoryId: [{ required: true, message: "请选择上级分类" }],
        f_Name: [{ required: true, message: "请输入数据名称" }],
      },
      methodArr: ["post", "get", "put", "delete"],
      tableData: [1, 2, 3, 4],
      options: [
        {
          value: "post",
          label: "post",
        },
        {
          value: "get",
          label: "get",
        },
        {
          value: "put",
          label: "put",
        },
        {
          value: "delete",
          label: "delete",
        },
      ],
      value: "post",
      paramsArr: [{ name: "", value: "", is: 0, bingName: "", bingValue: "" }],
      headerArr: [{ name: "", value: "", is: 0 }],
      formVisible: false,
      f_ResponseType: { dataTypeName: "", dataTypeFullName: "", isArray: false },
      jsonText: "",
      errorTipText: "",
    };
  },
  computed: {},
  created() {
    var _this = this;

    api
      .getList()
      .then((res) => {
        res.data.data.forEach(function (v) {
          v.label = v.f_Name;
          v.value = v.f_Id;
        });
        var rows = _this.$deepClone(res.data.data);
        _this.apiArr = rows;
      })
      .catch(() => {});
  },
  methods: {
    responseTypeClear() {
      this.f_ResponseType = { dataTypeName: "", dataTypeFullName: "", isArray: false };
    },
    lr_apiTree(data) {
      data = data || [];
      return this.$toTree(data, "f_Id", "f_ParentId", "f_Id", "f_Name");
    },

    resetForm() {
      //this.formData.f_Id = '';
      this.$refs.form && this.$refs.form.resetFields();
      this.jsonText = "";
      this.errorTipText = "";
    },
    // 校验表单
    validateForm() {
      return this.$formValidateWraper(this.$refs.form);
    },
    setForm(data) {
      this.formData = this.$deepClone(data);
      //this.ajaxTabIndex = this.formData.f_EnCode;
      this.f_ResponseType = JSON.parse(data.f_ResponseType);
      this.jsonText = this.formData.f_RequestParameters;
    },
    getForm() {
      try {
        let jsonText = this.jsonText ? JSON.parse(this.jsonText) : "";
        this.formData.f_RequestHeaders = "";
        this.formData.f_RequestParameters = jsonText ? JSON.stringify(jsonText) : "";
        this.formData.f_SortCode = parseInt(this.formData.f_SortCode);
        //this.formData.f_ResponseType.isArray = this.formData.f_ResponseType.isArray ? 1 : 0;
        this.formData.f_ResponseType = JSON.stringify(this.f_ResponseType);
        //this.formData.f_EnCode = this.ajaxTabIndex;
        let formData = this.$deepClone(this.formData);
        return formData;
      } catch (e) {
        return false;
      }
    },
    dblinkChange(e) {
      var _this = this;
      _this.dbArr.forEach(function (v) {
        if (v.value == e) _this.formData.f_Name = v.label;
      });
    },

    //参数选项改变
    ajaxTabChange() {
      this.errorTipText = "";
    },

    // ajaxTestTap() {
    //   // this.getForm();
    //   if (this.formData.f_Url.length == 0) {
    //     this.$message({
    //       type: "warning",
    //       message: "接口地址不能为空",
    //     });
    //     return false;
    //   }

    //   const params = JSON.parse(this.jsonText);

    //   api
    //     .request(this.formData.f_Url, this.formData.f_RequestMethod, params)
    //     .then(() => {
    //       // console.log(res);
    //       this.$message({
    //         type: "success",
    //         message: "请求成功!",
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "error",
    //         message: "请求失败!",
    //       });
    //     });
    // },

    //数据结构-弹窗选择
    dataPickTap() {
      this.$emit("showCityName", 100);
    },

    //数据结构
    entityFormChange(e) {
      //console.log("entityFormChange", e);
      this.f_ResponseType = e.row;
    },
  },

  watch: {
    jsonText(n) {
      try {
        this.errorTipText = "";
        n && JSON.parse(n);
      } catch (err) {
        this.errorTipText = "数据类型不正确。数据格式：{}，符号'{'开头，符号'}'结尾<br>字段名称用双引号包括";
      }
    },
  },
};
</script>
<style scoped>
.l-from-el-alert {
  margin-bottom: 20px;
}
.el-table .el-table__cell {
  padding: 2px 0;
}
.ui-jsonText-tipText {
  color: #f00;
}
</style>
<style>
.ui-jsonText-item {
  padding-top: 10px;
}
.ui-jsonText-item .el-textarea__inner {
  height: 120px;
}
</style>
